HyperCard Tutorial

By Tim Omernick
Infinity Software

Edited By: ZiffDuck
_______________________________________________________

Table of Contents
1. Conventions Used in this Zine
2. Tools Needed
3. About HyperCard
4. A HyperCard Stack
5. Employer Records - Part One
6. Fields
7. Buttons
8. About HyperTalk
9. Scripting the "New Record" button
10. Scripting the "Save Record" button
11. Scripting the "Open Record" button
12. If You Need Help

_______________________________________________________

1 . Conventions Used in this Zine
-Words in bold are key terms that you should be familiar with after reading this document.  Usually, the bold word is defined in the sentence it's in, or the next sentence.
-Sections are separated by a series of dashes.
-Make sure you go through the entire chapter - don't skip around or the program will not work!

_______________________________________________________

2. Tools needed for this lesson:
-HyperCard (You should get 2.3 or later)
-The sample stack that should have been included
-A working knowledge of the Macintosh and it's interface components (buttons, windows, the mouse, etc.)

_______________________________________________________

3. About HyperCard
HyperCard, at it's lowest level, is a simple drawing, typing, and presentation tool.  At it's highest level, however, it will create useful applications, interactive multimedia, product demos, etc.  It has a very simple programming language that takes about 5 minutes to learn, and all of the aspects of developing in HyperCard are, well, pretty darn easy.

However, even though it has some good features, it also has some down sides.  HyperCard programs, known as stacks, are usually unbearably slow, and it's color capabilities are very limited and hard to use.

Before you go further, you should play around with HyperCard.  Make your own stack, draw things, play with buttons and stuff (you don't even have to know how buttons work, just get comfortable with how HyperCard is organized.)  Go ahead - you probably won't break anything.  Just don't edit the home stack.

That's enough talk about HyperCard, let's get going!

_______________________________________________________

4. A HyperCard Stack
When you open up HyperCard, the first thing you should see is a window with a whole bunch of buttons in it.  This is called the Home Stack.  The Home Stack is where lots of your tools, such as clip art, are indexed for your convenience.

1.  Choose "Open Stack" from the "File" menu.
2.  Find the sample stack included with this tutorial.  It should be in a folder called "Employer Records", in the same folder this tutorial was in.

Now you should have a window with a picture of a notebook on it, about half a screen's size.  The part of the window that is contains the pictures and buttons is a card.  The card is where all the interactive media (such as text, graphics, buttons, etc.) are stored in your application.
This card will be the start of a program we're going to make together, called "Employer Records".

_______________________________________________________

5. Employer Records - Part One
In this program, you will be making an application that will take input from an employer about his/her employees, and generate a record file about them.  The layout of the stack has already been given to you, all you need to do is fill in the code that makes it work.

_______________________________________________________

6. Fields
Interactivity is the key to most programs, so we'll add some way to plug in data about people.  In HyperCard, a box of text is called a field.  Fields come in many different varieties - some have borders, some are for labels and have no border, some have a scroll bar on them.  To edit fields, select the field tool in the "Tools" menu.  It's the third one in the top row.

The last field on the card is called "Other Info:".  What if the information entered in this field is so long, it extends below the lower border?  The answer is a scrolling field.  Doing this is simple:

1.  Make sure you have the field tool selected.
2.  Double-click on the large field labeled "Other Info:" - don't double-click the label, make sure you get the one beside the label.
3.  There's a pop up menu in the upper-right of the dialog box that comes up.  Choose "Scrolling" from that.
4.  Click on "OK".

A scroll bar should have appeared on the right side of the "Other Info" field.

The rest of the fields are pretty much done for you.

 _______________________________________________________

7. Buttons
Buttons are another key element to HyperCard programming.  In fact, they're the most common and easy to use control in HyperCard.  The three buttons in our program are called "New Record", "Save Record", and "Open Record".  You can click them now, but they won't do anything until you program them.

_______________________________________________________

8. About HyperTalk
HyperTalk is the programming language that you use to script, or program, everything in HyperCard.  HyperTalk controls buttons, fields, menus, and pretty much everything else you can think of that exists in HyperCard.

HyperTalk is object-oriented.  Don't get scared yet, object-oriented doesn't necessarily mean complicated.  In fact, it makes programming quite a bit easier.  To help you understand what I mean by object-oriented, you should think of it this way:

Everything in HyperCard, whether it's a button, field, menu, card, or stack, is an object.  Each one of these objects do certain things - a button usually goes to another card, a field is usually for entering text.  You can send these object messages, called handlers, that make them do things.  Some of these messages are sent automatically, though.  Let's take a button, for example.  When you click on it and release, the system sends the "mouseUp" handler to the button.  If the button is scripted to accept mouseUp, such as shown below, it will catch the message and react to it.

             -A button's script-
on mouseUp
  domenu "Quit HyperCard"
end mouseUp

This button's script accepts the mouseUp handler - "on mouseUp".  This simply means that whenever the system sends the mouseUp handler to that button, that button will react as specified.  Make sure that you end every "on ..." statement with an "end ..." statement, like above!  When this button encounters the mouseUp handler, it will send the domenu handler to your program.  Domenu is automatically programmed.  You just need to supply the right menu name, and it will select a menu for you.

If you want a list of all the pre-defined handlers, go to the home stack and click on "Stack Kit".  Then, click on "HyperTalk Reference".  Click on "System messages" or "Commands", and all of the system handlers, like "domenu", "keydown", "mouseUp", etc. will be there for a full explanation.

Well, that's pretty much it for HyperTalk.  Let's get coding!

_______________________________________________________

9. Scripting the "New Record" Button
This will be the most challenging and hard to understand part of this tutorial.  Just be patient and I'll try to explain everything as best as I can.

1.  Choose the button tool from the "Tools" menu.
2.  Double-click on the button called "New Record".
3.  A dialog should come up with two rows of buttons on the bottom.  Click on "Script…".

A window will come up, with the mouseUp handler already there.  Since it's already filled in for you, all you need to do is fill in the code, which is below.  Fill it in so that the script looks just like this one.

on mouseUp
  put empty into card field "Name"
  put empty into card field "Age"
  put empty into card field "Occupation"
  put empty into card field "Date Hired"
  put empty into card field "Salary"
  put empty into card field "Other"
end mouseUp

When this button is clicked, it will clear the contents of every editable field on the card.  If you wanted to put something else in a field, such as default information, you could do this (this is optional, you don't need to do this):

on mouseUp
  put empty into card field "Name"
  put empty into card field "Age"
  put "Programmer" into card field "Occupation"
  put empty into card field "Date Hired"
  put empty into card field "Salary"
  put empty into card field "Other"
end mouseUp

Any string (text surrounded by quotes) or number will work for the put command.  Empty is pre-defined in HyperTalk - it just means blank.

When you're done with this script, close the script window, and click on "Yes" when it asks you to save.

If you need any help with this script, just refer to the completed stack that was included with this tutorial.  It has all working code, and your program should be just like it when you're done with this tutorial.

_______________________________________________________

10. Scripting the "Save Record" Button
Now, open the script of the "Save Record" button.  Do this just like you did for the last button.  Again, you will see that HyperCard has already put in a mouseUp handler.  Make your script just like the one below.

on mouseUp
  put card field "Name" into theName
  put card field "Age" into theAge
  put card field "Occupation" into theOcc
  put card field "Date Hired" into theDate
  put card field "Salary" into theSalary
  put card field "Other" into otherInfo
  put return after theName
  put return after theAge
  put return after theOcc
  put return after theDate
  put return after theSalary
  ask file "Where would you like to save?" with theName
  put it into theFile
  if theFile ≠ empty then
    open file theFile
    write theName to file theFile
    write theAge to file theFile
    write theOcc to file theFile
    write theDate to file theFile
    write theSalary to file theFile
    write otherInfo to file theFile
    close file theFile
  end if
end mouseUp

This is a pretty repetitive script, but it works.  First, it takes the contents of the field "Name", and puts it into the variable theName.  A variable is just a place for a value to be stored -- in HyperTalk, that's a number, string, or some other value.  It repeats this for each field, and then it puts a return (carriage return) at the end of each one except the field "Other Info".  This is equivalent to saying - "Put the contents of this field into this container, and press return at the end of it".  We do this because we want all of the different pieces of data to be on a different line, for readability purposes.

Note - To get the ≠, just hold down option and press the equals key. "=".

Then, it asks the user where they would like to save the file.  Note how theName is used in that command - that says that the default name of the file is the same as the name of the employee.  It checks to see that theFile is not empty (the only way this can happen is if the user clicked "cancel").  If all goes well, the script will open the file, write all the data to it, and close the file.

_______________________________________________________

11. Scripting the "Open Record" Button
Making the "Open Record" button will be the hardest part.  The simplest way to do it is to have an invisible field, in which the data from the employee file is read to.  If the file is read successfully, there will be an invisible field with all of the needed information to work with.  The reason you do this is quite simple.  When you're reading from a file, you can't say "I want the third line down from the top of this file".  HyperTalk just can't do that.  That poses a problem for how to get the information from the employee file to the appropriate fields.

That invisible field comes to our rescue!  You can  say "I want the third line down from the top", if you're talking about a field!  I have included it in the stack, but you can't see it.  If you want to see it:

1.  Choose "Message" from the "Go" menu.
2.  Type:  set the visible of card field "data" to true
3.  Look at it all you want, but make sure you make it invisible again!  Do the same command as below, replacing true with false.
4.  Choose "Message" from the "Go" menu again to hide the message window.

Now, look at the script for the button called "Open Record".  Type this in:

on mouseUp
  answer file "Choose an employee record to open." of type text
  put it into theFile
  if theFile ≠ empty then
    open file theFile
    read from file theFile until end
    put it into theData
    put theData into card field "data"
    close file theFile
    put line 1 of card field "data" into theName
    put line 2 of card field "data" into theAge
    put line 3 of card field "data" into theOcc
    put line 4 of card field "data" into theDate
    put line 5 of card field "data" into theSalary
    put line 6 of card field "data" into otherInfo
    put theName into card field "Name"
    put theAge into card field "Age"
    put theOcc into card field "Occupation"
    put theDate into card field "Date Hired"
    put theSalary into card field "Salary"
    put otherInfo into card field "Other"
  end if
end mouseUp

This script will ask the user for a record to open.  If the record is not empty (the user didn't click cancel), then it will read all of the data from that file and put it into the invisible field "data".  Then, the script will take each individual line from the field "data", and put them into the right fields.

_______________________________________________________

12. If You Need Help
If you don't understand something in this tutorial, or would like more information about HyperCard or it's functions, you can look around in the "HyperTalk Reference" section described earlier.

Also, you can email me at:  cooltim@gte.net

(Ed. Note: A really good hypercard book to try to find at you local library is "The HyperCard Complete" or something like that. It was written by someone who helped write HC from the start.)